<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05-浮动的三大特性</title>
  <style>
    /* 浮动盒子 */
    .box1 {
      float: left;
      /* 位置不在保留 标准流的盒子将会顶替上来 */
      /* 可以理解为浮动的盒子相对标准流盒子不在一个层级 多加了一个图层 */
      /* 浮动的元素时互相贴在一起的(不会存在缝隙)，如果父级元素装不下这些浮动的盒子时候，多出的盒子就会"另起一行"对齐 */
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    /* 标准流盒子 */
    .box2 {
      width: 400px;
      height: 400px;
      background-color: saddlebrown;
    }

    /* 原本的span标签是行级元素 没有高度宽度设置 如果添加了浮动会怎么样？ */
    span {
      /* 这是我们看到span标签拥有了行内块元素特性 可以直接设置高度与宽度 */
      float: left;
      width: 200px;
      height: 200px;
      background-color: seagreen;
    }

    p {
      float: right;
      height: 300px;
      background-color: sienna;
    }
  </style>
</head>

<body>

  <!-- 1. 浮动会脱离标准流控制(浮) 浮动到指定位置(动) (俗称脱标) 等级不同 -->
  <!-- 2. 浮动的盒子不在保留原先的位置 -->
  <!-- 3. 浮动的元素具有行内块元素特点 -->

  <div class="box1">浮动的盒子</div>
  <div class="box2">标准流的盒子</div>

  <span>1</span>
  <span>2</span>

  <p>我是p标签</p>

</body>

</html>